<template>
  <Dialog
    v-model="show"
    @confirm="handleSubmit"
    @close="close"
    :title="$t('sellerAnnualFee.auditDia.年费缴纳审核')"
    width="800px"
    :showFooter="false"
  >
    <div>
      <div class="flex">
        <div class="color-666666 label-text">{{ $t('sellerAnnualFee.auditDia.商户ID') }}：</div>
        <div>{{ props.data.id }}</div>
      </div>
      <div class="flex mt12">
        <div class="color-666666 label-text">{{ $t('sellerAnnualFee.auditDia.店铺名称') }}：</div>
        <div>{{ props.data["tenantName" + locale] }}</div>
      </div>
      <div class="flex mt12">
        <div class="color-666666 label-text">{{ $t('sellerAnnualFee.auditDia.店主账号') }}：</div>
        <div>{{ props.data.userAccount }}</div>
      </div>
      <div class="flex mt12">
        <div class="color-666666 label-text">{{ $t('sellerAnnualFee.auditDia.联系人') }}：</div>
        <div>{{ props.data.concatName }}</div>
      </div>
      <div class="flex mt12">
        <div class="color-666666 label-text">{{ $t('sellerAnnualFee.auditDia.联系人电话') }}：</div>
        <div>{{ props.data.concatPhone }}</div>
      </div>
      <div class="flex mt12">
        <div class="color-666666 label-text">{{ $t('sellerAnnualFee.auditDia.缴纳年限') }}：</div>
        <div>{{ props.data.ruleDuration }}{{ $t('datePick.年') }}</div>
      </div>
      <div class="flex mt12">
        <div class="color-666666 label-text">{{ $t('sellerAnnualFee.auditDia.缴纳金额') }}：</div>
        <div>{{ props.data.ruleFee }}{{ $t('currency.元') }}</div>
      </div>
      <div class="flex mt12">
        <div class="color-666666 label-text">{{ $t('sellerAnnualFee.auditDia.凭证') }}：</div>
        <div class="flex_aic gap-12 flex-wrap">
          <el-image
            v-for="img in props.data.payImage?.split(',') || []"
            style="width: 60px; height: 60px"
            :src="img"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="[img]"
            show-progress
            fit="cover"
            :preview-teleported="true"
          />
        </div>
      </div>
      <div class="flex mt12">
        <div class="color-666666 label-text">{{ $t('sellerAnnualFee.auditDia.审核结果') }}：</div>
        <el-radio-group v-model="radio">
          <el-radio label="1">{{ $t('sellerAnnualFee.auditDia.审核通过') }}</el-radio>
          <el-radio label="-1">{{ $t('sellerAnnualFee.auditDia.审核不通过') }}</el-radio>
        </el-radio-group>
      </div>

      <div class="flex mt12" v-if="radio === '-1'">
        <div class="color-666666 label-text">{{ $t('sellerAnnualFee.auditDia.审核不通过原因') }}：</div>
        <el-input
          v-model="reason"
          type="textarea"
          :rows="4"
          :maxlength="100"
          show-word-limit
          :placeholder="$t('sellerAnnualFee.auditDia.请输入审核不通过原因')"
        />
      </div>
    </div>
  </Dialog>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
import Dialog from "@/components/dialog.vue";
import Api from "@/config/api/api";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";

const { locale, t } = useI18n();
const show = defineModel();
const emit = defineEmits();
const radio = ref("1");
const reason = ref("");
const props = defineProps({
  data: {
    type: Object,
    required: true,
    default: () => ({}),
  },
});
// 当对话框打开时获取数据
watch(show, (val) => {
  if (val) {
  }
});

// 关闭主对话框
const handleSubmit = () => {
  if (radio.value === "-1") {
    if (!reason.value) {
      ElMessage.error(t("sellerAnnualFee.auditDia.请输入审核不通过原因"));
      return;
    }
  }

  Api.auditSellerAnnualFee({
    id: props.data.id,
    checkStatus: radio.value,
    rejectReason: reason.value,
  }).then((res) => {
    if (res.status === 200) {
      ElMessage.success(t("sellerAnnualFee.auditDia.操作成功"));
      emit("success");
      close();
    }
  });
};

const close = () => {
  radio.value = "1";
  reason.value = "";
  show.value = false;
};
</script>

<style scoped lang="scss">
.label-text {
  width: 120px;
  text-align: right;
  margin-right: 12px;
  flex-shrink: 0;
}
</style>
